<template>
	<view class="page">
		<view class="pt10"></view>
	
		<view class="com-form mx16 r6 px12 fs14 mt10">
			<view class="com-form-item flex_box flex_align py5">
				<view class="label">收 货 人</view>
				<view class="inputbox">
					<input v-model="name" placeholder="请填写收货人姓名" placeholder-style="color:#cecece;font-size:28rpx"/>
				</view>
			</view>
			<view class="com-form-item flex_box flex_align py5">
				<view class="label">联系电话</view>
				<view class="inputbox">
					<input v-model="mobile" type="number" maxlength="11" placeholder="手机号或固话"  placeholder-style="color:#cecece;font-size:28rpx"/>
				</view>
			</view>
			<view class="com-form-item flex_box flex_align py5">
				<view class="label">选择地区</view>
				<view class="inputbox">
					<region-picker @change="region_change" jsonPath="All">
						<view class="picker flex_box flex_align flex_between">
							<input disabled="disable" class="uni-input" placeholder="请选择省市区" placeholder-style="color:#cecece;font-size:28rpx" v-model="areaCity" />
							<image src="/static/usercenter/arrow.png" class="rightArow"></image>
						</view>
					</region-picker>
				</view>
			</view>
			<view class="pt5 pb30">
				<view class="label">详细地址</view>
				<view class="inputbox">
					<input v-model="address" placeholder-style="color:#cecece" placeholder="具体到街道、楼栋、门牌号等" />
				</view>
			</view>
			<!-- <view class="com-form-item2">
				<view class="label">设为默认地址：</view>
				<switch checked @change="switch1Change" />
			</view> -->
		</view>
	
		<view class="mt40" v-if="addressId == 0" @click="add">
			<view class="mx12 bgfc r40 align_c cff py12">添加地址</view>
		</view>
		<view class="mt40" v-else @click="update">
			<view class="mx12 bgfc r40 align_c cff py12">修改地址</view>
		</view>
	</view>
</template>

<script>
	import regionPicker from "@/components/region-picker/region-picker.vue"

	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				mobile: '',
				name: '',
				provinceId: '',
				areaId: '',
				cityId: '',
				address: '',
				isDefault: '1',
				areaCity: '',
				addressId:0,
				check:false
			}
		},

		onLoad(option) {
			
			if(option.detail != null){
				let detail = JSON.parse(option.detail);
				this.mobile = detail.mobile;
				this.name = detail.username;
				this.areaCity = detail.provinceName+detail.cityName+detail.areaName;
				this.provinceId = detail.provinceid
				this.cityId = detail.cityid
				this.areaId = detail.areaid
				this.address = detail.address;
				this.addressId = detail.id;
				
			}
		},
		methods: {

			region_change(e) {
				console.log("=============");
				console.log(e);
				let code = e.detail.code;
				let value = e.detail.value;
				let id = e.detail.id;
				this.provinceId = id[0];
				this.cityId = id[1];
				this.areaId = id[2];
				this.areaCity = value[0] + value[1] + value[2];
				

			},
			
			update(){
				if (this.name == '') {
				
					this.$util.$showToast('请填入姓名', '', 'none');
					return;
				}
				
				if (this.mobile == '') {
				
					this.$util.$showToast('请填入手机号', '', 'none');
					return;
				}
				if (this.provinceId == '') {
				
					this.$util.$showToast('请选择城市', '', 'none');
					return;
				}
				if (this.address == '') {
				
					this.$util.$showToast('请填入地址', '', 'none');
					return;
				}
				
				let param = {
					id:this.addressId,
					username:this.name,
					mobile: this.mobile,
					provinceId: this.provinceId,
					areaId: this.areaId,
					cityId: this.cityId,
					address: this.address,
				}
				let that = this;
				this.$api.editAddress(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						uni.navigateBack({
							delta:1
						})
					}else{
						this.$util.$showToast(res.msg, '', 'none');
						
					}
				})
			},
			
			add() {
				if (this.name == '') {

					this.$util.$showToast('请填入姓名', '', 'none');
					return;
				}

				if (this.mobile == '') {

					this.$util.$showToast('请填入手机号', '', 'none');
					return;
				}
				if (this.provinceId == '') {

					this.$util.$showToast('请选择城市', '', 'none');
					return;
				}
				if (this.address == '') {

					this.$util.$showToast('请填入地址', '', 'none');
					return;
				}

				let param = {
					username:this.name,
					mobile: this.mobile,
					provinceId: this.provinceId,
					areaId: this.areaId,
					cityId: this.cityId,
					address: this.address,
				}
				let that = this;
				this.$api.addAdress(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						uni.navigateBack({
							delta:1
						})
					}else{
						this.$util.$showToast(res.msg, '', 'none');
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F9F9F9;
		min-height: 100vh;
	}
	.w200{width: 200rpx;}
	textarea{min-height: 60rpx;height: auto;}
	.bgfc{background: $uni-color-primary;}
	.cff{color: #FFFFFF;}
	.rightArow{width: 24rpx;height: 24rpx;}
	.jxIcon{width: 32rpx;height: 32rpx;}
	.selIcon{width: 48rpx;height: 48rpx;}
	.com-form {
		background: #FFFFFF;
		.label {
			width: 150rpx;
			line-height: 70rpx;
		}
		.inputbox {
			height: 70rpx;
			line-height: 70rpx;
			text-align: left;
			width: 75%;
		}
		input {
			height: 70rpx;
			line-height: 70rpx;
			width: 100%;
		}
		
		.com-form-item:last-child {
			border-bottom: none;
		}

		.com-form-item2 {
			border-bottom: 1rpx solid #EFEFEF;
			border-top: 20rpx solid #EFEFEF;
			display: flex;
			padding: 20rpx 0;

			.label {
				font-size: 28rpx;
				color: #666666;
				padding: 20rpx;
				flex: auto;
			}

			switch {
				text-align: right;
				margin-top: 5rpx;
			}
		}
	}
</style>
